<template>
    <div id="app">
      <h1 style="text-align: center">App根组件</h1>
      <div class="nav" style="text-align: center">
        <span
          :class="{ active: activeTab === 'home' }"
          @click="setActiveTab('home')"
        >
          首页
        </span>
        <span
          :class="{ active: activeTab === 'about' }"
          @click="setActiveTab('about')"
        >
          关于
        </span>
        <span
          :class="{ active: activeTab === 'movie' }"
          @click="setActiveTab('movie')"
        >
          电影
        </span>
        <span
          :class="{ active: activeTab === 'mine' }"
          @click="setActiveTab('mine')"
        >
          我的
        </span>
      </div>
      <div v-if="activeTab" class="main-content">
        <div v-if="activeTab === 'home'" class="sub-page">home组件</div>
        <div v-if="activeTab === 'about'" class="sub-page">About组件</div>
        <div v-if="activeTab === 'movie'" class="sub-page">
          <div
            v-for="movie in movies"
            :key="movie"
            @click="setActiveMovie(movie)"
            class="movie-item"
          >
            {{ movie }}
          </div>
          <div v-if="activeMovie" class="movie-sub-page">
            <button @click="goBackToMovies">返回</button>
            {{ activeMovie }}的网页
          </div>
        </div>
        <div v-if="activeTab === 'mine'" class="sub-page">我的组件</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const activeTab = ref('');
  const activeMovie = ref('');
  const movies = ref(['电影1', '电影2', '电影3']);
  
  const setActiveTab = (tab) => {
    activeTab.value = tab;
    activeMovie.value = '';
  };
  
  const setActiveMovie = (movie) => {
    activeMovie.value = movie;
  };
  
  const goBackToMovies = () => {
    activeMovie.value = '';
  };
  </script>
  
  <style scoped>
  .nav span {
    padding: 5px 10px;
    cursor: pointer;
    margin: 0 5px;
  }
  
  .nav span.active {
    background-color: darkblue;
    color: white;
  }
  
  .movie-item {
    color: darkblue;
    cursor: pointer;
  }
  
  .sub-page {
    width: 50%;
    margin: 10px auto;
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
  }
  
  .movie-sub-page {
    width: 50%;
    margin: 10px auto;
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #ccc;
  }
  </style>